<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>传感记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
</head>
<body>
<div class="searchTable">
    <div class="layui-inline">
        <!--layui-select标签必须在layui-form里面才生效。。-->
        <form class="layui-form">
            <select id="s_sensorType" class="layui-select" name="s_sensorType"></select>
            <div class="layui-unselect layui-form-select">
                <div class="layui-select-title">
                    <input type="text" placeholder="传感器类别" autocomplete="off"
                           class="layui-input layui-unselect">
                    <i class="layui-edge"></i>
                </div>
            </div>
        </form>
    </div>
    <button type="button" id="searchBtn" class="layui-btn" data-type="reload">搜索</button>
</div>

<!--二维列表-->
<table class="layui-hide" id="SysSensor" lay-filter="SysSensor"></table>

<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">

<script type="text/html" id="tbBar">
    <!--查看账号-->
    <i style="font-size: 24px; color: #4178ff;" class="layui-icon layui-icon-list " lay-event="get"
       shiro:hasPermission="/device/get"></i>
</script>

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<!--序号自增-->
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script>
    layui.use(['jquery', 'table', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        //页面一打开就执行弹层
        layer.ready(function () {
            // 查询选项：设备类型下拉框
            addOption(layui.jquery("#s_sensorType"), DataType.SensorType, true);
            // 渲染
            layui.form.render();
        });

        table.render({
            elem: '#SysSensor'
            , url: ctx + '/sensor/getPage'
            , method: 'post'
            , contentType: 'application/json'
            , defaultToolbar: false //去掉右上角的打印等按钮
            , title: 'SysSensor'
            , loading: true //显示加载条
            , cols: [
                [
                    {title: '序号', templet: '#xuhao', align: 'center'},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'deviceName', title: '设备名称', align: 'center'},
                    {field: 'deviceId', title: '传感器ID', align: 'center'},
                    {
                        field: 'sensorType', title: '传感器类别', align: 'center',
                        templet: function (d) {
                            return getLabel(DataType.SensorType, d.sensorType)
                        }
                    },
                    {field: 'sensorData', title: '传感器数据', align: 'center'},
                    {
                        field: 'createTime', title: '上报时间', align: 'center',
                        templet: function (d) {
                            if (d.createTime == null) {
                                return "";
                            } else {
                                return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                            }
                        }
                    }
                    /*{fixed: 'right', title: '操作', toolbar: '#tbBar'}*/
                ]
            ]
            , page: true
            , request: {
                pageName: 'pageNum'//页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.body.totalSize, //解析数据长度
                    "data": res.body.list //解析数据列表
                };
            }

        });

        /*重载*/
        var $ = layui.$, active = {
            reload: function () {
                var queryWhere = {};
                //执行重载
                table.reload('SysSensor', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: queryWhere
                    , done: function (res, curr, count) {
                        this.where = {};
                    }
                }, 'data');
            }
        };

        /*搜索*/
        $('#searchBtn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>

</body>
</html>